<template>
  <div class="app-content ">
    <div class="operation">
      <el-tabs v-model="activeName">
        <el-tab-pane label="原料采购车" name="first">
          <el-table ref="table" :data="detailsList" style="min-width: 100%" size="small" row-key="id" class="table" :span-method="objectSpanMethod">
            <el-table-column label="来源" min-width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.goods_id">
                  <el-link type="primary" :underline="false">{{ scope.row.goods_sku_code }}</el-link>
                </div>
                <div v-else> 原材料 </div>
              </template>
            </el-table-column>
            <el-table-column label="图片" min-width="40">
              <template slot-scope="scope">
                <div v-if="scope.row.goods_id">
                  <el-image v-viewer :src="scope.row.goods_image" />
                </div>
                <div v-else>
                  <el-image v-viewer :src="scope.row.bom_imgurls?scope.row.bom_imgurls[0]:''">
                    <div slot="error" class="image-slot" />
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="原料类别/单位" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.sort_name }} / {{ scope.row.use_unit }}
              </template>
            </el-table-column>
            <el-table-column label="原料简称" min-width="150" prop="bom_name" />
            <el-table-column label="原料编码" min-width="150" prop="bom_sku_code" />
            <el-table-column label="颜色" min-width="60" prop="color_name" />
            <el-table-column label="规格" min-width="80" prop="spec_two_value" />
            <el-table-column label="单件用量" min-width="80" prop="use_amount" />
            <el-table-column label="单件成本" min-width="80" prop="price" />
            <el-table-column label="损耗(%)" min-width="80" prop="wastage" />
            <el-table-column label="损益(%)" min-width="80" prop="profit_loss" />
            <el-table-column label="采购需求总量" min-width="100" prop="use_amount_all" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="采购详情" name="second">
          <!-- 搜索 -->
          <div>
            <label class="f-12">搜索明细：</label>
            <el-select v-model="seach.status" placeholder="子采购单状态" filterable size="small">
              <el-option value="" label="请选择子采购单状态" />
              <el-option value="0" label="未收货" />
              <el-option value="1" label="已入库" />
              <el-option value="2" label="已收货" />
              <el-option value="3" label="已质检" />
            </el-select>
            <el-button type="primary" class="ml-10" icon="el-icon-search" size="small" @click="searchBox('search')">搜索</el-button>
            <el-button icon="el-icon-refresh-left" size="small" @click="searchBox('reset')">重置</el-button>
          </div>
          <!-- 采购明细 -->
          <purchaseDetail ref="purchaseDetail" :admin-list="adminList" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

import { PurchaseUnify } from '@/api/purchase/purchaseUnify'
import purchaseDetail from '../../purchaseVehicle/components/purchaseDetail'
import { Admin } from '@/api/system/admin'
export default {
  name: 'Details',
  components: {
    purchaseDetail
  },
  data() {
    return {
      detailsList: [],
      activeName: 'first',
      spanArr: [],
      pos: 0,
      seach: {},
      purchase_unify_id: '',
      adminList: []
    }
  },
  created() {
    // 获取用户列表
    Admin.listAdmin().then((res) => {
      this.adminList = res.data
    }).catch(() => {})
  },

  methods: {
    show(id) {
      this.purchase_unify_id = id
      this.getPurchase(id)
      // 获取采购详情
      this.$refs.purchaseDetail.show(id)
    },
    // 获取原料列表
    getPurchase(id) {
      PurchaseUnify.snapshotPurchaseUnify({ id }).then((res) => {
        this.detailsList = res.data
        this.merge(this.detailsList)
      }).catch(() => {})
    },
    // 搜索
    searchBox(val) {
      if (val === 'reset') {
        this.seach = {}
      }
      this.$refs.purchaseDetail.show(this.purchase_unify_id, this.seach)
    },
    // 合并单元格
    objectSpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合并单元格
    merge(data) {
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 商品
          if (data[i].goods_sku_code) {
            if (data[i].goods_sku_code === data[i - 1].goods_sku_code) {
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              this.pos = i
            }
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.operation{
  padding:  0 20px;
}
.ml-10{
  margin-left: 10px;
}
</style>
